<template>
  <div class="test-con">
    一原生方式查看user信息
    姓名:{{ $store.state.user.userInfo.name }}
    年龄:{{ $store.state.user.userInfo.age }}
    <hr>
    二原生方式获取 mapgetter中的属性
    <!-- 为什么这样访问：因为 $store.getters 存储的属性，可以打印查看 -->
    大写的名字{{ $store.getters["user/upperCaseName"] }}
    <hr>
    三原生方式修改用户信息<button @click="changeUserInfo">原生方式修改user模块数据</button>
    <hr>
    四原生方式异步1秒后更新用户信息<button @click="syncChangeUser">原生方式异步更新user模块数据</button>
  </div>
</template>

<script>
export default {
  created () {
    console.log(this.$store.getters)
  },
  methods: {
    changeUserInfo () {
      const newUserInfo = { name: 'lizi', age: 56 }
      // 语法：模块名/mutations中方法名，额外传参
      this.$store.commit('user/changeUserInfo', newUserInfo)
    },
    syncChangeUser () {
      const newUserInfo = { name: 'yibu', age: 56 }
      this.$store.dispatch('user/syncChangeUserInfo', newUserInfo)
    }
  }
}
</script>

<style>

</style>
